<template>
<div id="swipe">
    <mt-swipe :auto="3000">
        <mt-swipe-item v-for="item in swipe" :key="item.pic">
            <img :src="item.pic" alt="">
        </mt-swipe-item>
    </mt-swipe>
</div>
</template>

<script>
export default {
    name: "Swipe",
    data() {
        return {
            swipe: []
        }
    },
    components:{
        
    },
    //组件创建之后
    created(){
        //加个this,让它一直往上找，直到原型对象
        this.axios.get('/banner',{
            //这种写法其实就是' /banner?type=1 '
            params:{
                type:1
            }
        })
        .then(res=>{
            // console.log(res.data.banners);
            //拿到的是一个数组对象，接收的当然也得是一个数组
            this.swipe=res.data.banners
        })
        .catch(err=>{
            console.log(err);
        })

    }

}
</script>

<style lang="less" scoped>
#swipe {
    margin-top: .8rem;
    height: 4rem;
    width: 100%;
    background: #ccc;

    img {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    ::v-deep .is-active{
      background-color:red;
    }
}
</style>
